<template>
  <div class="zlxg-page">
    <div class="primary-header clearfix flex flex-row align-center">
      <div class="line" />
      <span class="font18 ml10 flex-auto">填报情况</span>
    </div>
    <div class="table-content">
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            当事人姓名
          </template>
          {{ formData.tbrqk_name }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            部门
          </template>
          {{ formData.tbrqk_dept }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            事件发生日期
          </template>
          {{ formData.tbrqk_fsrq }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            院区
          </template>
          {{ formData.hospital }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            发生地点
          </template>
          {{ formData.tbrqk_fsdd }}{{ formData.tbrqk_fsddqt }}
        </el-descriptions-item>
        <el-descriptions-item :span="1" :label-style="labelStyle2">
          <template slot="label">
            事件属性
          </template>
          {{ formData.sjsx_dsxz }}
        </el-descriptions-item>

      </el-descriptions>
      <el-descriptions class="mt30" :column="3" border>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            患者姓名
          </template>
          {{ formData.sjsx_patient_name }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            性别
          </template>
          {{ formData.patient_sex }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            出生年月
          </template>
          {{ formData.patient_birth }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            年龄
          </template>
          {{ formData.patient_age }}{{ formData.patient_age_unit }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            民族
          </template>
          {{ formData.patient_mz }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            体重
          </template>
          {{ formData.patient_weight?formData.patient_weight+'公斤':'' }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            联系方式
          </template>
          {{ formData.patient_phone }}
        </el-descriptions-item>

        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            既往药品不良反应/事件
          </template>
          {{ formData.jwypbl }}{{ formData.jwypbl_detail }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="1"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            家族药品不良反应/事件
          </template>
          {{ formData.jzypbl }}{{ formData.jzypbl_detail }}
        </el-descriptions-item>
        <el-descriptions-item
          :span="3"
          :content-style="contentStyle"
          :label-style="labelStyle"
        >
          <template slot="label">
            相关重要信息
          </template>
          {{ formData.xgzyxx | arrayString }}{{ formData.xgzyxxqt }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" :label-style="labelStyle2">
          <template slot="label">
            目前用药情况
          </template>
          {{ formData.mqyyqk }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" :label-style="labelStyle2">
          <template slot="label">
            患者目前情况
          </template>
          {{ formData.hzmqqk }}
        </el-descriptions-item>

        <el-descriptions-item :span="4" :label-style="labelStyle2">
          <template slot="label">
            附件
          </template>
          <div
            v-if="
              formData.file_1695551641000_83288 &&
                formData.file_1695551641000_83288.length > 0
            "
          >
            <div
              v-for="(item, index) in formData.file_1695551641000_83288"
              :key="index"
              class="value flex flex-row align-center mb10"
            >
              <el-link type="primary" :underline="false" class="width400">{{
                item.name
              }}</el-link>
              <el-button
                type="primary"
                size="small"
                class="ml30"
                icon="el-icon-download"
                @click="downFile(item)"
              >下载</el-button>
              <el-button
                v-if="item"
                type="primary"
                size="small"
                icon="el-icon-view"
                class="ml20"
                @click="previewFile(item)"
              >预览</el-button>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Gycwsj',
  components: { },
  filters: {
    arrayString(val) {
      if (val && Array.isArray(val) && val.length > 0) {
        return val.join(',')
      } else {
        return ''
      }
    }
  },
  props: ['formData', 'createTime'],
  data() {
    return {
      contentStyle: {
        'text-align': 'left',
        'min-width': '180px'
      },
      // label样式
      labelStyle: { width: '130px' },
      labelStyle1: { 'min-width': '200px' },
      labelStyle2: { width: '130px' }
    }
  },

  computed: {},
  mounted() {},
  methods: {
    async downFile(item) {
      const filePath = item.url
      axios.get(filePath, { responseType: 'blob' }).then(res => {
        if (!res || !res.data) {
          ElMessage({
            type: 'warning',
            message: '文件下载失败'
          })
          return
        }

        var pos2 = filePath.lastIndexOf('/')
        const fileName = filePath.substring(pos2 + 1)
        const blob = new Blob([res.data], { type: 'application/pdf' })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = fileName
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      })
    },
    previewFile(item) {
      var filePath = '' + item.url
      var pos = filePath.lastIndexOf('.')
      var extName = filePath.substring(pos + 1)
      extName = extName.toLowerCase()
      if (
        extName != 'pdf' &&
        extName != 'jpg' &&
        extName != 'jpeg' &&
        extName != 'png' &&
        extName != 'gif'
      ) {
        this.$messageS({
          type: 'warning',
          message: '上传的文件格式不支持预览'
        })
        return false
      }
      window.open(filePath)
    }
  }
}
</script>
<style lang="scss" scoped></style>
